<template>
  <div>
    <el-row class="bgf">
      <el-col :span="12" :offset="5">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="rolename">
            <el-input v-model="ruleForm.rolename"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="">
            <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              :check-strictly="isStrictly"
              :props="defaultProps"
              default-expand-all
              ref="tree"
            >
            </el-tree>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              v-if="!$route.params.id"
              @click="submitForm('ruleForm')"
              >立即添加</el-button
            >
            <el-button type="success" v-else @click="submitForm('ruleForm')"
              >立即修改</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { menuinfo } from "../../http";
export default {
  data() {
    return {
      ruleForm: {
        rolename: "",
        // 角色的权限，是一个数组
        menus: [],
        status: 1,
        // 不是严格模式， 父子是关联的。 父点击了子全部选中，子点击了父也会被勾中
        isStrictly: false
      },
      // 树形控件的数据
      treeData: [{
          id: 1,
          label: '1',
          children: [{
            id: 4,
            label: '4',
            children: [{
              id: 9,
              label: '9'
            }, {
              id: 10,
              label: '10'
            }]
          }]
        }, {
          id: 2,
          label: '2',
          children: [{
            id: 5,
            label: '5'
          }, {
            id: 6,
            label: '6'
          }]
        }, {
          id: 3,
          label: '3',
          children: [{
            id: 7,
            label: '7'
          }, {
            id: 8,
            label: '8'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
      rules: {
        rolename: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
    };
  },
  created() {
    // rolelist
    // 判断修改还是新增
    if (this.$route.params.id) {
      // 获取id对应的菜单的数据
      this.getInfoById(this.$route.params.id);
    }
  },
  mounted() {
    // 先获取角色的数据，其中有menus这个数组，然后根据menus勾选树形控件
    this.setCheckedKeys()
  },
  methods: {
    // 修改菜单时，根据id获取菜单信息
    async getInfoById(id) {
      // console.log(await menuinfo(this.$route.params.id));
      this.ruleForm = await menuinfo(this.$route.params.id);
    },
    // 点击按钮，先校验
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验成功后，才可以提交数据
          // 显示权限
          this.getCheckedKeys()
          // this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) ;
          // getCheckedKeys完全的选中节点
          // getHalfCheckedKeys半选中的节点
          // 讲解地址：https://element.eleme.cn/2.13/#/zh-CN/component/tree
          this.ruleForm.menus = this.$refs.tree
            .getCheckedKeys()
            .concat(this.$refs.tree.getHalfCheckedKeys());
          console.log(this.ruleForm.menus);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // ============== 提交数据 【添加、修改】示例代码 ===============
    // async submit() {
    //   this.$refs.ruleForm.validate(valid => {
    //     if (valid) {
    //       // 发送请求！
    //       let res;
    //       // this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) ;
    //       // 获取 获取树形控件的数据！（选中的节点以及父级节点）
    //       this.ruleForm.menus = this.$refs.tree
    //         .getCheckedKeys()
    //         .concat(this.$refs.tree.getHalfCheckedKeys());
    //       if (this.$route.params.id) {
    //         this.ruleForm.id = this.$route.params.id; // 给表单数据添加上id
    //         res = await editRole(this.ruleForm); // 修改请求
    //       } else {
    //         res = await addRole(this.ruleForm); // 添加请求
    //       }
    //       if (res) {
    //         this.$router.back();
    //       }
    //     } else {
    //       this.$message.warn("验证不通过");
    //     }
    //   });
    // },
    // ============== 提交数据 【添加、修改】示例代码 ===============
    // 树形结构-获取选中的节点---提交表单的时候会用
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    // 树形结构-设置选中的节点----打开修改页面会用到
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([9,10]);
    },
    // 添加菜单
    addMenu() {
      
    },
    // 真的修改了
    editMenu() {
    
    },
  },
};
</script>
<style lang="">
</style>